import { toJS } from 'mobx'

export const getEChartsOption = data => {
    try {
        switch (data.type) {
            case '1': // 柱形图2D
                return getBarOption(data);
            case '2': // 柱形图3D
                return getBarOption(data);
            case '3': // 线形图
                return getLineOption(data);
            case '4': // 面积图
                return getAreaOption(data);
            case '5': // 条形图
                return getBarGraphOption(data);
            case '6': // 饼图2D
                return getPieOption(data);
            case '7': // 饼图3D
                return getPieOption(data);
            case '8': // 圆环图
                return getCircleOption(data);
            case '9': // 圆环图
                return getCircleOptionMulit(data);
            case '11': // 仪表盘
                return getGaugeOption(data);
        }
    } catch (e) { }
};

const getBarOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.categories
        },
        yAxis: {
            type: 'value'
        },
        series: data.series.map(item => {
            return {
                type: 'bar',
                name: item.name,
                data: item.data
            };
        })
    };
};

const getLineOption = data => {
    console.log('data', data)
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.categories
        },
        yAxis: {
            type: 'value'
        },
        series: data.series.map(item => {
            return {
                type: 'line',
                name: item.name,
                data: item.data
            };
        })
    };
};

const getAreaOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.categories
        },
        yAxis: {
            type: 'value'
        },
        series: data.series.map(item => {
            return {
                type: 'line',
                name: item.name,
                data: item.data,
                areaStyle: {}
            };
        })
    };
};

const getBarGraphOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: data.categories
        },
        series: data.series.map(item => {
            return {
                type: 'bar',
                name: item.name,
                data: item.data
            };
        })
    };
};

const getPieOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                type: 'pie',
                name: data.series.name,
                data: data.series.data.map(item => {
                    return { name: item[0], value: item[1] };
                })
            }
        ]
    };
};

const getCircleOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                type: 'pie',
                name: data.series.name,
                radius: ['40%', '60%'],
                data: data.series.data.map(item => {
                    return { name: item[0], value: item[1] };
                })
            }
        ]
    };
};

const getGaugeOption = data => {
    return {
        title: {
            text: ''
        },
        tooltip: {
            formatter: '{a} <br/>{c} {b}'
        },
        series: [
            {
                type: 'gauge',
                data: [{ name: '', value: data.data.realval }]
            }
        ]
    };
};

//圆环图  多个
const getCircleOptionMulit = data => {
    return {
        title: data.title,
        xAxis:{
            show:false
        },
        legend: {
            shadow:true,
            icon:'circle',
            itemGap:20,
            padding:[10,15]
        },
        // tooltip: {
        //     // formatter: '{a} <br/>{b} : {c} ( {d}% )'
        //     formatter: function(params){
        //         let name = params.seriesName;
        //         return `${name} <br/> ${params.name} : ${params.value[2]} (${params.percent}%)`
        //     }
        // },
        dataset: {
            source: data.dataset.source
        },
        series: data.series.map(items =>{
            return {
                type: 'pie',
                name:items.name,
                radius: ['35%', '55%'],
                center: items.center,
                encode: {
                    itemName: 'product',
                    value: items.name
                },
                labelLine: {
                    show: false
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params){
                        let {seriesName,name,value,componentIndex,percent} = params;
                        return `${seriesName} <br/> ${name} : ${value[Number(componentIndex)+1]} (${percent}%)`
                    }, 
                    position: function(point, params, dom, rect, size){
                        return setTooltipXY(point, params, dom, rect, size)
                    } 
                },
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter: function(params){
                            return `{a|${data.series[params.seriesIndex].label.normal.amount}}`
                        },
                        rich:{
                            a:{
                                fontSize:16,
                                fontWeight:'bold',
                                paddingBottom:10

                            },
                            b:{
                                fontSize:12,
                                color:'#f00'
                            }
                        }
                    }
                }
            }
        })

    };
};

const setTooltipXY = (point, params, dom, rect, size)=>{
    /*
    point: 鼠标位置，是一个数组，如 [20, 50]
    dom : tooltip 的 dom 对象。
    size 
        size中有两个属性：viewSize为外层div的大小，contentSize为tooltip提示框的大小  
    */
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下

    // 提示框位置
    let x = 0,y = 0;

    // 当前鼠标位置
    let pointX = point[0];
    let pointY = point[1];

    // 提示框大小
    let boxWidth = size.contentSize[0];
    let boxHeight = size.contentSize[1];

    x = boxWidth > pointX ? 5 : pointX - boxWidth;
    y = boxHeight > pointY ? 5: pointY - boxHeight;

    return [x,y]
}

